<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖拽组件示例</title>
    <link rel="stylesheet" href="./css/elements.css">
    <!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">-->
    <link rel="stylesheet" href="./css/fontawesome-free-6.4.0-web/css/all.min.css">
    <style>
        body {
            margin-left: 0px;
            margin-top: 0px;
            height: auto;
        }
    </style>
</head>
<body>
<!-- 左侧组件库 -->
<div class="panel left-panel">
    <div class="panel-header">
        <img src="./img/zujian.jpeg" style="width:40px;height:40px;border-radius:50%"/>
        <span style="font-size: 40px">组件库</span>
    </div>
    <div style="height:80px;"></div>
    <div class="search-box">
        <input type="text" placeholder="搜索组件..." id="id_search" onchange="search()">
    </div>
    <div class="components-container" id="componentsContainer"></div>
</div>
<script>
    // 使用fetch API请求本地的components/elements.json文件，获取组件数据

    var zujian_arr = []
    fetch('../components/elements.json')
    // fetch('/shujuzhanshi/getzujianxinxi')
        // 第一步：将响应转换为JSON格式
        .then(response => response.json())
        // 第二步：处理解析后的JSON数据
        .then(data => {
            zujian_arr = data;
            // 获取页面中用于存放组件的容器元素（id为componentsContainer）
            const container = document.getElementById('componentsContainer');
            // 创建一个空对象，用于按组归类组件数据
            const groups = {};

            // 遍历组件数据，按group属性进行分组
            data.forEach(item => {
                // 如果当前组名在groups中不存在，则初始化一个空数组
                if (!groups[item.group]) {
                    groups[item.group] = [];
                }
                // 将当前组件添加到对应组的数组中
                groups[item.group].push(item);
            });

            // 遍历分组后的对象，生成HTML结构并添加到容器中
            for (const groupName in groups) {
                // 创建一个折叠面板容器
                const accordion = document.createElement('div');
                // 给折叠面板添加样式类
                accordion.className = 'accordion active';
                // 设置折叠面板的HTML内容（包含标题栏和内容区域）
                accordion.innerHTML = `
                        <div class="accordion-header active">
                          <div><i class="fas fa-cubes"></i><span>${groupName}</span></div>
                          <i class="fas fa-chevron-right"></i>
                        </div>
                        <div class="components-grid"></div>
                      `;
                // 获取折叠面板中的网格容器（用于存放组件项）
                const grid = accordion.querySelector('.components-grid');

                // 遍历当前组下的所有组件，生成组件项HTML
                groups[groupName].forEach(comp => {
                    // 创建组件项容器
                    const div = document.createElement('div');
                    // 添加样式类
                    div.className = 'component-item';
                    // 设置组件项的id（取自数据中的elname）
                    div.id = comp.elname;
                    // 允许组件项被拖拽
                    div.draggable = true;
                    // 存储组件类型数据（用于后续处理）
                    div.setAttribute('data-type', comp.type);
                    // 存储组件名称数据（用于后续处理）
                    div.setAttribute('data-name', comp.name);
                    // 设置组件项的HTML内容（包含图标、名称和标签）
                    div.innerHTML = `
                          <i class="${comp.icon}"></i>
                          <h3>${comp.name}</h3>
                          <span class="component-tag">${comp.type}</span>
                        `;
                    // 给组件项添加拖拽开始事件
                    div.addEventListener('dragstart', () => {
                        // 将当前拖拽的组件id存储到localStorage中，供后续使用
                        localStorage.setItem('draggedContent', comp.elname);
                    });
                    // 将组件项添加到网格容器中
                    grid.appendChild(div);
                });

                // 将整个折叠面板添加到页面容器中
                container.appendChild(accordion);
            }

            // 为所有折叠面板标题添加点击事件，实现展开/折叠功能
            document.querySelectorAll('.accordion-header').forEach(header => {
                header.addEventListener('click', function() {
                    // 切换当前折叠面板的active类（控制展开/折叠状态）
                    this.parentElement.classList.toggle('active');
                });
            });

        })
        // 捕获并打印请求或处理过程中出现的错误
        .catch(err => console.error('加载组件失败:', err));

    function search(){
        // 获取页面中用于存放组件的容器元素（id为componentsContainer）
        const container = document.getElementById('componentsContainer');
        container.innerHTML = "";
        // 创建一个空对象，用于按组归类组件数据
        const groups = {};

        // 遍历组件数据，按group属性进行分组
        const search_text = document.getElementById('id_search').value;
        zujian_arr.forEach(item => {
            if (item.name.includes(search_text) || item.elname.includes(search_text) || item.group.includes(search_text)){
                // 如果当前组名在groups中不存在，则初始化一个空数组
                if (!groups[item.group]) {
                    groups[item.group] = [];
                }
                // 将当前组件添加到对应组的数组中
                groups[item.group].push(item);
            }

        });

        // 遍历分组后的对象，生成HTML结构并添加到容器中
        for (const groupName in groups) {
            // 创建一个折叠面板容器
            const accordion = document.createElement('div');
            // 给折叠面板添加样式类
            accordion.className = 'accordion active';
            // 设置折叠面板的HTML内容（包含标题栏和内容区域）
            accordion.innerHTML = `
                <div class="accordion-header active">
                <div><i class="fas fa-cubes"></i><span>${groupName}</span></div>
                <i class="fas fa-chevron-right"></i>
                </div>
                <div class="components-grid"></div>
                          `;
            // 获取折叠面板中的网格容器（用于存放组件项）
            const grid = accordion.querySelector('.components-grid');

            // 遍历当前组下的所有组件，生成组件项HTML
            groups[groupName].forEach(comp => {
                // 创建组件项容器
                const div = document.createElement('div');
                // 添加样式类
                div.className = 'component-item';
                // 设置组件项的id（取自数据中的elname）
                div.id = comp.elname;
                // 允许组件项被拖拽
                div.draggable = true;
                // 存储组件类型数据（用于后续处理）
                div.setAttribute('data-type', comp.type);
                // 存储组件名称数据（用于后续处理）
                div.setAttribute('data-name', comp.name);
                // 设置组件项的HTML内容（包含图标、名称和标签）
                div.innerHTML = `
                    <i class="${comp.icon}"></i>
                    <h3>${comp.name}</h3>
                    <span class="component-tag">${comp.type}</span>
                                `;
                // 给组件项添加拖拽开始事件
                div.addEventListener('dragstart', () => {
                    // 将当前拖拽的组件id存储到localStorage中，供后续使用
                    localStorage.setItem('draggedContent', comp.elname);
                });
                // 将组件项添加到网格容器中
                grid.appendChild(div);
            });

            // 将整个折叠面板添加到页面容器中
            container.appendChild(accordion);
        }
    }
</script>
</body>
</html>

<!--<script>-->
<!--    function handleClick(event) {-->
<!--        localStorage.setItem('draggedContent', event.target.id);-->
<!--    }-->
<!--    function bindEventToChildren(parentId, eventType, eventHandler) {-->
<!--        const parentElement = document.getElementById(parentId);-->
<!--        if (!parentElement) return;-->

<!--        // 获取父元素的所有子元素-->
<!--        const children = parentElement.children;-->

<!--        // 为每个子元素绑定事件监听器-->
<!--        for (let i = 0; i < children.length; i++) {-->
<!--            children[i].addEventListener(eventType, eventHandler);-->
<!--        }-->
<!--    }-->
<!--    // 绑定点击事件到父元素的所有子元素-->
<!--    bindEventToChildren('parent-div', 'dragstart', handleClick);-->

<!--</script>-->
